/*
 * @Author: puhuaping
 * @Date: 2020-04-13 16:56:23
 */
<style lang="less" scoped>
.merchant-list {
  .btnBox {
    text-align: right;
  }
  .ivu-btn-small {
    padding: 1px 7px;
  }
  .ivu-btn {
    margin: 0 3px;
  }
}
.model-wrap .ivu-form-item {
  margin-bottom: 10px;
}
.flex-table {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}
.page-button-wrap {
  margin-top: 10px;
  text-align: center;
}
</style>
<template>
  <div class="merchant-list">
    <Card :bordered="true">
      <p slot="title">
        订单基本信息（{{detailData&&{
        ORDER_INIT: "待支付",
        ORDER_CANCELED: "已取消",
        ORDER_FINISHED: "已完成",
        ORDER_PAID: "待发货",
        ORDER_WAIT_RECEIVING: "待收货"
        }[detailData.state]}}）
      </p>
      <Form :label-width="60" inline style="margin-bottom:10px">
        <Row>
          <Col span="8">
            <FormItem label="订单ID">{{detailData&&detailData.orderId}}</FormItem>
          </Col>
          <Col span="8">
            <FormItem label="商品名称">{{detailData&&detailData.goodsName}}</FormItem>
          </Col>
          <Col span="8">
            <FormItem label="商品规格">{{detailData&&detailData.skuName}}</FormItem>
          </Col>
          <Col span="8">
            <FormItem label="购买用户">{{detailData&&detailData.parentOrder.userName}}</FormItem>
          </Col>
          <Col span="8">
            <FormItem
              label="支付方式"
            >{{detailData&&detailData.parentOrder.paymentType=='WECHAT'?'微信支付':'爱豆支付'}}</FormItem>
          </Col>
          <Col span="8">
            <FormItem label="订单金额">{{detailData&&detailData.totalPrice}}</FormItem>
          </Col>
        </Row>
      </Form>
    </Card>
    <Card :bordered="true" style="margin-top:10px">
      <p slot="title">操作记录</p>
      <Form :label-width="60" inline style="margin-bottom:10px">
        <Row>
          <Col span="12">
            <FormItem label="下单时间">{{detailData&&detailData.parentOrder.paymentTime}}</FormItem>
          </Col>
          <Col span="12">
            <FormItem label="支付时间">{{detailData&&detailData.parentOrder.paymentTime}}</FormItem>
          </Col>
          <Col span="12">
            <FormItem label="核销时间"></FormItem>
          </Col>
          <Col span="12">
            <FormItem label="取消时间"></FormItem>
          </Col>
        </Row>
      </Form>
    </Card>
    <div class="page-button-wrap">
      <Button type="default" @click="backPrev">返回</Button>
      <Button type="primary" @click="showModel=true;modelNum=2">取消订单</Button>
    </div>
    <Modal v-model="showModel" title="预约订单-取消" width="300" @on-visible-change="changeModel">
      <Form
        ref="formSubmitRef"
        :model="formSubmitData"
        :rules="formSubmitRule"
        class="model-wrap"
        label-position="left"
      >
        <FormItem label prop="remark">
          <Input type="textarea" placeholder="请输入拒绝原因" :rows="4" v-model="formSubmitData.remark" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="default" @click="showModel=false">取消</Button>
        <Button type="primary" @click="sureModel">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import Tables from "@/components/tables/tables.vue";
import { requestData, getData } from "@/api/data";
import { setToken, getToken } from "@/libs/util";
import { isNumber } from "@/tool/validator";
import util from "@/tool/util.js";
import config from "@/config";
import { mapMutations } from "vuex";
const baseUrl =
  process.env.NODE_ENV === "development"
    ? config.baseUrl.dev
    : config.baseUrl.pro;
const _this = this;
export default {
  name: "aidou",
  components: {
    Tables
  },
  data() {
    return {
      modelNum: 0,
      danhao: 1,
      showModel: false,
      detailData: null,
      pageID: "",
      showModel: false,
      formSubmitRule: {
        remark: [
          {
            required: true,
            message: "请输入原因",
            trigger: "blur"
          }
        ]
      },
      formSubmitData: {
        remark: ""
      }
    };
  },
  watch: {
    $route: "fetchData"
  },
  methods: {
    ...mapMutations(["closeTag"]),
    fetchData(newVal, oldVa) {
      this.pageID = this.$route.query.id;
      this.getDetail();
    },
    //返回
    backPrev() {
      let query = this.$route.query;
      this.closeTag({
        name: "detailReservation",
        query
      });
      this.$router.push({ name: "reservationOrder" });
    },
    //model确定
    sureModel() {
      this.$refs.formSubmitRef.validate(valid => {
        if (valid) {
          let dataObj = {
            id: this.pageID,
            remark: this.formSubmitData.remark
          };
          requestData("/admin/service/order/cancel", "post", dataObj).then(
            res => {
              if (res.data.code == 0) {
                this.$Message.success("操作成功");
                this.showModel = false;
                this.getDetail();
              } else {
                this.$Message.error(res.data.msg);
              }
              this.showModel = false;
            }
          );
        }
      });
    },
    //模态框改变
    changeModel(e) {
      if (!e) {
        this.formSubmitData = {
          remark: ""
        };
      }
    },
    getDetail() {
      const dataObj = {
        id: this.pageID
      };
      requestData("/admin/service/order/detail", "get", dataObj).then(res => {
        if (res.data.code == 0) {
          let resData = res.data.data;
          this.detailData = resData;
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    }
  },
  mounted() {
    const query = this.$route.query;
    this.pageID = query.id;
    this.getDetail();
  }
};
</script>
